<template>
	<view class="page-container">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList" :fixed="false" :empty-config="{tip: '暂无数据'}"
			class="paging-container">
			<view class="content">
				<view class="item-list">
					<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
						<view class="shop-top">
							<image class="shop-photo" :src="item?.merImagesList[0]" mode="widthFix" />
							<view class="distance-tag">
								<text class="distance-text">{{ item?.distance }}km</text>
							</view>
						</view>
						<view class="shop-name">
							<text class="name-text">{{ item?.merName }}</text>
						</view>
					</view>
				</view>
			</view>

			<template #empty>
				<view>暂无数据</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		nextTick
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		userCollectApi
	} from "@/api/personalFavorites.js";

	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		}, // 接收父组件当前索引
		browseType: {
			type: String,
			default: ''
		},
	});

	const emit = defineEmits(["reload"]);
	// 响应式数据
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);
	const pagingRef = ref(null);
	const isLoading = ref(false); // 控制收藏按钮加载状态
	const dataList = ref([]);
	// 监听currentIndex变化
	watch(
		() => props.currentIndex,
		(newVal) => {
			if (newVal === props.tabIndex) {
				pagingRef.value?.reload();
			}
		}, {
			immediate: true
		}
	);


	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				pageNum: pageNum,
				pageSize: pageSize,
				browseType: props.browseType
			};

			const res = await userCollectApi(params);
			if (res && res.code === 200) {
				const result = res.rows || [];
				pagingRef.value.complete(result);
			} else {
				pagingRef.value.complete(false);
			}
		} catch (error) {
			console.error('接口调用失败:', error);
			pagingRef.value.complete(false);
		}
	};

	const itemClick = (item) => {
		uni.navigateTo({
			url: `/pages/nearby/nearDetails?item=${encodeURIComponent(JSON.stringify(item))}`
		});
	};
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100%;
		height: 100%;
		// background-color: #f5f5f5;
	}

	.paging-container {
		width: 100%;
		height: 100%;
	}

	.content {
		padding: 20rpx;
	}

	.empty-view {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
		width: 100%;
	}

	.item-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// padding: 10rpx;
		box-sizing: border-box;

		.item {
			width: calc(50% - 10rpx);
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			overflow: hidden;

			.shop-top {
				position: relative;
				width: 100%;

				.shop-photo {
					width: 100%;
					display: block;
					border-top-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
				}

				.distance-tag {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					font-size: 24rpx;
					padding: 5rpx 15rpx;
					border-radius: 24rpx;
					z-index: 10;
					font-weight: 400;
				}
			}

			.shop-name {
				padding: 35rpx 20rpx;

				.name-text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>